<template>
	

	<body>
		<div class="header container">
			<div class="header_left">

			</div>
			<div class="header_center">
				输入搜索的内容
			</div>
			<div class="header_right">
				<div class="header_right_left"><a href="../分类/index.html" style="color: #000000;">分类</a></div>
				<div class="header_right_right"></div>
			</div>
		</div>
		<div class="banner container">`
			<div style="height: auto;" class="bannder container swiper-container">
				<div class="swiper-wrapper">

					<!-- 下面是4个不同颜色的轮播滑块 -->
					<div class="swiper-slide sw-slide slide"><img src="./img/banner@2x.png">
					</div>
				</div>
				<!-- <div class="swiper-button-prev" ></div> -->
				<!--左箭头-->
				<!-- <div class="swiper-button-next"></div> -->
				<!--右箭头-->
				<div class="swiper-pagination"></div>
				<!--分页器（就是4个点点）-->
			</div>
		</div>
		<div class="container">
			<ul class="nav">
				<li>
					<a href="#">
						<span><img src="./img/xl@2x(2).png"></span>
						<span>学习中心</span>
					</a>
				</li>
				<li>
					<a href="#">
						<span><img src="./img/xl@2x(3).png"></span>
						<span>选课中心</span>
					</a>
				</li>
				<li>
					<a href="#">
						<span><img src="./img/xl@2x.png"></span>
						<span>数学课程</span>
					</a>
				</li>
				<li>
					<a href="#">
						<span><img src="./img/xl@2x(1).png"></span>
						<span>在线课程</span>
					</a>
				</li>
			</ul>
		</div>
		<div class="sheji container">
			<div class="sheji_left">
				<span>技术学院</span>
				<span>2473人已订阅</span>
			</div>
			<div class="sheji_right">
				<ul>
					<li>
						<span>技术学院</span>
						<span>2473人已订</span>
					</li>
					<li>
						<span>技术学院</span>
						<span>2473人已订</span>
					</li>
					<li>
						<span>技术学院</span>
						<span>2473人已订</span>
					</li>
					<li>
						<span>技术学院</span>
						<span>2473人已订</span>
					</li>
				</ul>
			</div>
		</div>
		<div class="jiner container">
			<div class="jiner_left">
				今日新课
			</div>
			<div class="jiner_right">
				查看全部>
			</div>
		</div>
		<div class="yinying"  v-for="(item,index) in bookData.list" :key="index">
			<div class="jiner_bd">
				<div class="jiner_bd_left">
					<img src="./img/500577327@2x.png" alt="">
				</div>
				<div class="jiner_bd_right">
					<span>{{ item.introduce1 }}</span>
					<span>{{ item.introduce2 }}</span>
					<div class="jiner_bd_right_bottom">
						<div class="jiner_bd_right_left">￥{{ item.price }}</div>
						<div class="jiner_bd_right_right">限量免费</div>
			
					</div>
				</div>
			</div>
			<div class="jiner_bottom">
				<div class="jiner_bottom_left">
					限报名前{{item.join}}人
				</div>
				<div class="jiner_bottom_center">
					已有<span>{{ item.receive }}</span>人领取
				</div>
				<div class="jiner_bottom_right">
					免费领取
				</div>
			</div>
		</div>


		
		<div class="xianshang container">
			<div class="xianshang_hd">
				<div class="xianshang_hd_left">
					线上分享
				</div>
				<div class="xianshang_hd_right">
					查看全部>
				</div>
			</div>
		</div>
		<div class="lunbo container">
			<!-- Swiper -->
			<div class="swiper mySwiper">
				<div class="swiper-wrapper">
				
					<div class="swiper-slide">
						<div class="main">
							<div class="main_hd">
								<img src="./img/500577327@2x(1).png" alt="">
							</div>
							<div class="wenzi container">
								<div class="main_bd">赚钱又赚人气的声音课 <span>共5节</span></div>
								<div class="main_bd_bd">
									<div class="main_bd_bd_left">
										来自千图网平台
									</div>
									<div class="main_bd_bd_right">
										1.2万次播放
									</div>
								</div>
							</div>
						</div>
						<!-- <div class="swiper-pagination"></div> -->
					</div>

				</div>
					
				</div>

				<div class="swiper-pagination"></div>
			</div>
			
			
			
			
			
			
			
			<div class="footer container">
				<ul>
					<li>
						<a @click="toIndex()">
							<span>&#xe751;</span>
							<span>首页</span>
						</a>
					</li>
					<li>
						<a @click="toCourse()">
							<span>&#xe614;</span>
							<span>课程</span>
						</a>
					</li>
					<li>
						<a @click="toHuati()">
							<span>
								&#xe630;
							</span>
							<span>话题</span>
						</a>
					</li>
					<li>
						<a @click="toMyUser()">
							<span>&#xe600;</span>
							<span>我的</span>
						</a>
					</li>
				</ul>
			</div>
	</body>

</template>



<script setup>
import './css/swiper-bundle.min.css'
import './css/normalize.css'
import './css/style.css'
import './swiper/swiper-bundle.min.css'
import './js/flexible.js'
import './css/lunbo.css'
import './swiper/swiper-bundle.min.js'
import './js/swiper-bundle.min.js'
import './iconfont/iconfont.css'

import request from "../../axios/request.js";
import { useRouter } from 'vue-router'
const router = useRouter()
const toIndex=()=>{
	router.push('/index')
}

const toCourse=()=>{
	router.push('/course')
}

const toHuati=()=>{
	router.push('/huati')
}

const toMyUser=()=>{
	router.push('/myuser')
}


  import { reactive, onMounted } from "vue";
  const bookData = reactive({
    list: [],
  });
  onMounted(() => {
    getData();
	console.log(bookData.list)
  });

 // 测试请求方法
 const getData = () => {
    request({
      // url: "/mock/getBooks",
      url: "http://127.0.0.1:8081/courses",
      method: "get",
    })
      .then((res) => {
        bookData.list = res.data;
        console.log(res);
      })
      .catch((error) => {
        console.log(error);
      });
  };

</script>
<style scoped>
.swiper-slide {
    width: 100%;
}
</style>

